<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DockerFly</title>
</head>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"/>
<link rel="stylesheet" href="css/uikit/uikit.css"/>
<script src="js/common/jquery.min.js"></script>
<script src="js/common/vue.min.js"></script>
<script src="js/common/uikit.js"></script>

<link rel="stylesheet" href="css/main.css"/>
<script lang="javascript" src="js/utils.js"></script>
<script lang="javascript" src="js/docker.js"></script>
<script lang="javascript">
    function init() {
        dockerInfoVue = new Vue({
            el: '#dockerApp',
            computed: {
                dockerInfo: function () {
                    return getDockerInfo();
                },
                //查询方法
                imageList : function() {
                    try {
                        return getImages();
                    } catch (e) {
                        alertError(e)
                    }
                }
            }
        });
    }
</script>
<body onload="init()" class="frameBody">
<div id="dockerApp" class="uk-grid" style="display: none" v-show="this.dockerInfo!=null">
    <div class="uk-width-6-6">
        <div class="uk-panel"></div>
        <h3></h3>
        <div>
            <h3 class="uk-text-middle"><span class="icon uk-icon-dashboard"></span> Summery</h3>
            <table class="uk-table uk-overflow-container uk-panel-box">
                <tr>
                    <td colspan="4">
                        <div class="uk-grid uk-text-center">
                            <div class="uk-width-1-4 uk-container">
                                <div class="uk-border-circle uk-container-center summery_badge uk-vertical-align"
                                     style="background-color: #337ab7;">
                                    <div class="uk-vertical-align-middle">
                                        <div class="uk-text-large uk-text-bold">CPU</div>
                                        <div>{{dockerInfo.nCPU}} core</div>
                                    </div>
                                </div>
                            </div>
                            <div class="uk-width-1-4 uk-container">
                                <div class="uk-border-circle uk-container-center summery_badge uk-vertical-align"
                                     style="background-color: #a1b700; ">
                                    <div class="uk-vertical-align-middle">
                                        <div class="uk-text-large uk-text-bold">Memory</div>
                                        <div>{{Math.ceil(dockerInfo.memTotal/1000/1024)}} Mb</div>
                                    </div>
                                </div>
                            </div>
                            <div class="uk-width-1-4 uk-container">
                                <div class="uk-border-circle uk-container-center summery_badge uk-vertical-align"
                                     style="background-color: #b73200; ">
                                    <div class="uk-vertical-align-middle">
                                        <div class="uk-text-large uk-text-bold">Container</div>
                                        <div>{{dockerInfo.containers}}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="uk-width-1-4 uk-container">
                                <div class="uk-border-circle uk-container-center summery_badge uk-vertical-align"
                                     style="background-color: #00b784; ">
                                    <div class="uk-vertical-align-middle">
                                        <div class="uk-text-large uk-text-bold">Images</div>
                                        <div>{{imageList.length}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
            <h3 class="uk-text-middle"><span class="icon uk-icon-codepen"></span> Host info</h3>
            <table class="uk-table uk-overflow-container uk-panel-box">
                <tbody>
                <tr>
                    <td class="uk-width-1-10 uk-text-right summeryField">ID:</td>
                    <td class="uk-width-9-10 uk-text-bold uk-text-primary uk-text-small" colspan="3">
                        {{dockerInfo.id}}
                    </td>
                </tr>
                <tr>
                    <td class="uk-width-1-10 uk-text-right summeryField">OS:</td>
                    <td class="uk-width-9-10 uk-text-muted" colspan="3">
                        {{dockerInfo.osType}}({{dockerInfo.architecture}})_{{dockerInfo.operatingSystem}}({{dockerInfo.kernelVersion}})
                    </td>
                </tr>
               <!--
                <tr>
                    <td class="uk-width-1-10 uk-text-right summeryField uk-text-primary">Cpu count:</td>
                    <td class="uk-width-1-4">{{dockerInfo.nCPU}}</td>
                    <td class="uk-width-1-10 uk-text-right summeryField uk-text-primary">Memory:</td>
                    <td class="uk-width-1-4 ">{{Math.ceil(dockerInfo.memTotal/1000/1024)}}Mb</td>
                </tr>
                -->
                </tbody>
            </table>
            <h3 class="uk-text-middle"><span class="icon uk-icon-info-circle"></span> Docker info</h3>
            <table class="uk-table uk-overflow-container uk-panel-box">
                <tbody>
                <tr>
                    <td class="uk-width-1-10 uk-text-right summeryField">Container:</td>
                    <td class="uk-width-1-4"><span class="uk-text-bold">Total: {{dockerInfo.containers}}</span> /
                        <span class="uk-text-primary uk-text-bold">Running: {{dockerInfo.containersRunning}}</span> /
                        <span class="uk-text-success uk-text-bold">Paused: {{dockerInfo.containersPaused}} </span> /
                        <span class="uk-text-danger uk-text-bold"> Stoped: {{dockerInfo.containersStopped}} </span>
                    </td>
                    <td class="uk-width-1-10 uk-text-right summeryField">Images:</td>
                    <td class="uk-width-1-4 ">{{imageList.length}}</td>
                </tr>
                <tr>
                    <td class="uk-width-1-10 uk-text-right summeryField">Docker home:</td>
                    <td class="uk-width-1-4">{{dockerInfo.dockerRootDir}}</td>
                    <td class="uk-width-1-10 uk-text-right summeryField">Docker version:</td>
                    <td class="uk-width-1-4">{{dockerInfo.serverVersion}}</td>
                </tr>
                <tr>
                    <td class="uk-width-1-10 uk-text-right summeryField">DockerHub mirror:</td>
                    <td class="uk-width-1-4" colspan="3">
                        <code v-for="mirror in dockerInfo.registryConfig.mirrors">{{mirror}}</code>
                    </td>
                </tr>
                </tbody>
            </table>
            <h3 class="uk-text-middle"><span class="icon uk-icon-mixcloud"></span> Cluster info</h3>
            <table class="uk-table uk-overflow-container uk-panel-box">
                <tbody>
                <tr>
                    <td class="uk-width-1-10 uk-text-right summeryField">Node id:</td>
                    <td class="uk-width-1-4">{{dockerInfo.swarm.nodeId}}</td>
                    <td class="uk-width-1-10 uk-text-right summeryField">Node addr:</td>
                    <td class="uk-width-1-4">{{dockerInfo.swarm.nodeAddr}}</td>
                </tr>
                <tr v-for="(remoteManager,index) in dockerInfo.swarm.remoteManagers">
                    <td class="uk-width-1-10 uk-text-right summeryField">Manager id:</td>
                    <td class="uk-width-1-4">{{remoteManager.nodeId}}</td>
                    <td class="uk-width-1-10 uk-text-right summeryField">Manager addr:</td>
                    <td class="uk-width-1-4">{{remoteManager.addr}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="uk-width-6-6">
        <div style="min-height:40px;" class="uk-text-center uk-margin-bottom">
            <div><img height="27" width="120" src="img/logo.png"/></div>
            <div>Copyright <span class="uk-icon-copyright"></span> Voovan Vsetful</div>
            <div>Powered by Voovan open source framework.</div>
            <div></div>
        </div>
    </div>
</div>

</body>
</html>